<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="680px" append-to-body @close="cancel">
      <el-form :ref="formRef" :model="form" :rules="rules" label-width="100px" :loading="loading" :disabled="formDisabled">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务分组" prop="jobGroup">
              <lam-dict-select v-model="form.jobGroup" dictCode="job_group" clearable placeholder="" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="jobName">
              <el-input v-model="form.jobName" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Cron表达式" prop="cronExpression">
              <el-autocomplete class="inline-input" v-model="form.cronExpression" value-key="dictValue" :fetch-suggestions="querySearchCron"
                  @select="handleCronSelect" clearable placeholder="请输入Cron表达式" style="width: 100%;" popper-class="cron-autocomplete">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.dictValue }}</div>
                  <span class="desc">{{ item.dictLabel }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="表达式描述" prop="cronExpDesc">
              <el-input v-model="form.cronExpDesc" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行类" prop="exeClass">
              <el-autocomplete class="inline-input" v-model="form.exeClass" value-key="className" :fetch-suggestions="querySearchClass"
                  @select="handleClassSelect" clearable placeholder="请输入执行类" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行方法" prop="exeMethod">
              <el-autocomplete class="inline-input" v-model="form.exeMethod" :fetch-suggestions="querySearchMethod" clearable placeholder="请输入执行方法" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <lam-dict-select type="radio" v-model="form.status" dictCode="job_status" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行参数" prop="exeParam">
              <span slot="label">
                执行参数<el-tooltip content="标准JSON字符串格式" placement="top"><i class="el-icon-question"></i></el-tooltip>
              </span>
              <el-input v-model="form.exeParam" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="并发类型" prop="concurrentType">
              <lam-dict-select type="radio" v-model="form.concurrentType" dictCode="concurrent_type" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行错误策略" prop="misfirePolicy">
              <lam-dict-select v-model="form.misfirePolicy" dictCode="misfire_policy" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录日志" prop="collectLog">
              <lam-dict-select type="radio" v-model="form.collectLog" dictCode="yn10" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注信息" prop="remark">
              <el-input v-model="form.remark" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </lam-dialog>

</template>

<script>
import { EditMixin } from '@/components/mixins/EditMixin';
import {httpGet} from '@/api';

export default {
  name: "EditScheduleJob",
  mixins:[EditMixin],
  data() {
    return {
      url: {
        base: '/sched/job',
        listTargetClass: '/sched/job/listTargetClass',
      },
      // 表单校验
      rules: {
        jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }, { validator: this.nameUniqueValidator, trigger: 'blur'}],
        jobGroup: [{ required: true, message: "请选择任务分组", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        cronExpression: [{ required: true, message: "con表达式不能为空", trigger: "blur" }],
        cronExpDesc: [{ required: true, message: "表达式描述不能为空", trigger: "blur" }],
        exeClass: [{ required: true, message: "执行类不能为空", trigger: "blur" }],
        exeMethod: [{ required: true, message: "执行方法不能为空", trigger: "blur" }],
        exeParam: [{ required: true, message: "执行参数不能为空", trigger: "blur" }],
        concurrentType: [{ required: true, message: "并发类型不能为空", trigger: "blur" }],
      },
      targetClassList:[],
      exeMethodList:[],
      cronList:[]
    };
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        jobName: "任务",
        jobGroup: "Dedault",
        status: 1,
        cronExpression: null,
        cronExpDesc: null,
        exeClass: null,
        exeMethod: null,
        exeParam: "{ }",
        concurrentType: 0,
        misfirePolicy: 3,
        remark: "参数为JSON字符串格式"
      };
    },

    nameUniqueValidator(rule, value, callback) {
      if(!this.form.jobGroup){
        callback(new Error("请先选择任务分组"))
        return;
      }
      let param = {jobName: value, jobGroup: this.form.jobGroup};
      if(this.operType=='update') param.id = this.form.id;
      this.checkUniqueAsyn(value, callback, 'scheduleJobName', param);
    },

    /** 在执行proms后打开弹窗之前，返回true则中断打开弹窗 */
    beforeOpen(title, operType, res){
      this.loadCronList();
      this.loadTargetClass();
    },

    loadCronList(){
      this.$getDictItems('cron_expression').then(data => {
        this.cronList = data;
      });
    },
    loadTargetClass(){
        httpGet(this.url.listTargetClass).then(res=>{
          if(res && res.success){
            this.targetClassList = res.data;
          }
        });
    },
    querySearchCron(queryKey, cb) {
      let list = this.cronList;
      let results = !queryKey ? list : list.filter(item => {
        queryKey = queryKey.toLowerCase();
        return item.value.toLowerCase().indexOf(queryKey) >= 0 || item.text.toLowerCase().indexOf(queryKey) >= 0;
      });
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearchClass(queryKey, cb) {
      let list = this.targetClassList;
      let results = !queryKey ? list : list.filter(item => {
        queryKey = queryKey.toLowerCase();
        return item.className.toLowerCase().indexOf(queryKey) >= 0;
      });
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearchMethod(queryKey, cb) {
      let list = this.exeMethodList;
      let results = !queryKey ? list : list.filter(item => {
        queryKey = queryKey.toLowerCase();
        return item.value.toLowerCase().indexOf(queryKey) >= 0;
      });
      cb(results);
    },
    handleCronSelect(item) {
      if(item){
        this.form.cronExpDesc = item.dictLabel;
      }
    },
    handleClassSelect(item) {
      if(item){
        this.exeMethodList = [];
        if(item.methods && item.methods.length){
          item.methods.forEach(item=>{this.exeMethodList.push({value:item})});
        }
      }
    },

    /** 提交按钮 */
    submitForm(){
      this.saveForm(this.url.base);
    }

  }
};
</script>

<style scoped>
.cron-autocomplete li{
  line-height: normal;
  padding: 7px;
}

.cron-autocomplete li .name{
  text-overflow: ellipsis;
  overflow: hidden;
}
.cron-autocomplete li .desc {
  font-size: 12px;
  color: #b4b4b4;
}
.cron-autocomplete li .highlighted .desc {
  color: #ddd;
}
</style>
